<template>
  <div>
   <van-list
     v-model="loading"
     :finished="finished"
     finished-text="没有更多了"
     @load="onLoad"
   >
    <!-- 单个商品的具体信息 -->
      <drinksItem
        v-for="item in list"
        :key="item.id"
        :milkPrice.sync="milkPrice"
        :item="item"
        @Plus="Plus"
        @Minus="Minus"
      >
      </drinksItem>
   </van-list>
  </div>
</template>

<script>
import drinksItem from './drinksItem'
import { getGoodsList } from '@/api/goods.js'
import { setItem } from '@/utils/localStorage.js'
export default {
  props: {
    milkPrice: {
      type: Number
    }
  },
  data () {
    return {
      value: 1,
      list: [],
      loading: false, // van-list组件的
      finished: false, // van-list组件的
      drinkInfoArr: []
    }
  },
  components: { drinksItem },

  methods: {
    async onLoad() {
      const { data } = await getGoodsList() // 获取所有商品详情
      // console.log(data)
      this.list = data.filter(item => item.goodsType === '酒水饮料') // 获取 酒水饮料类商品的 信息
    },

    Plus(data) {
      data.goodsStock--
      if (this.drinkInfoArr.some(item => item.id === data.id)) {
        for (let i = 0; i < this.drinkInfoArr.length; i++) {
          if (this.drinkInfoArr[i] === data.id) {
            this.drinkInfoArr[i] = data
            break
          }
        }
      } else {
        this.drinkInfoArr.push(data)
      }
      console.log(this.drinkInfoArr, '加号')
      setItem('drinkInfoArr', this.drinkInfoArr)
    },

    Minus(data) {
      data.goodsStock++
      if (this.drinkInfoArr.some(item => item.id === data.id)) {
        for (let i = 0; i < this.drinkInfoArr.length; i++) {
          if (this.drinkInfoArr[i] === data.id) {
            this.drinkInfoArr[i] = data
            break
          }
        }
      } else {
        this.drinkInfoArr.push(data)
      }
      console.log(this.drinkInfoArr, '减号')
      setItem('drinkInfoArr', this.drinkInfoArr)
    }

  }
}
</script>

<style>
   .goods-card {
    margin: 0;
    background-color: red;
  }
 .breadImg{
   width:300px;
   height:200px;
   margin:0 auto
 }
</style>
